<template>
    <div>
      
<!-- 头部 -->
    <div id="top">
          <ul>
              <li class="top_dl" v-if="$store.state.token==''">
                  <span @click="dialogVisible = true">登录</span>
                  |
                  <span @click="zc_add=true">注册</span>
              </li>
               <li class="top_dl" v-else @click="tcdl">
                  {{$store.state.name}}
              </li>
              <li class="top_min">我的订单</li>
              <li class="top_min"> <router-link to="/love" class="top_min" >我的收藏</router-link> </li>
              <li class="top_cart">
                  <router-link to="/cart" class="top_cart">
                  <i class="el-icon-shopping-cart-2"></i>
                  购物车({{0}})
                  </router-link> 
              </li>
          </ul>
    </div>


<!-- 登录弹出框 -->
<el-dialog
  title="登录"
  :visible.sync="dialogVisible"
  width="30%"
 >
  <!-- 样式 -->
  <van-form @submit="onSubmit">
  <van-field
    v-model="username"
    name="userName"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="password"
    type="password"
    name="password"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">立即登录</van-button>
  </div>
</van-form>
<!-- 样式 -->

  <!-- <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span> -->
</el-dialog>
<!-- 登录弹出框 -->





<!-- 注册 -->
<el-dialog
  title="注册"
  :visible.sync="zc_add"
  width="30%"
 >
  <!-- 样式 -->
  <van-form @submit="zc_sj">
  <van-field
    v-model="username"
    name="userName"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="password"
    type="password"
    name="password"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">立即注册</van-button>
  </div>
</van-form>
</el-dialog>
<!-- 注册 -->











































<!-- 头部 -->

<!-- 头部跳转二级路由栏 -->
<div id="bql_big">
    <div class="bql_shoppe">
        <img src="http://106.15.179.105/img/logo.c8999c02.png" title="shoppe" class="bql_img">
    </div>
    <ul class="bql_ul">
        <li :style="yyds" @click="shoppe_sy"><router-link to="/" :style="yydsone">首页</router-link></li>
        
        <li :style="yyds_allcart" @click="shoppe_cartall"><router-link to="/text" :style="yydstow">全部商品</router-link></li>
        <li :style="yyds_my" @click="shoppe_my"><router-link to="/my" :style="yydsmy">关于我们</router-link></li>
    </ul>
    <div class="bql_ss">
        <el-input placeholder="请输入搜索内容" v-model="allss" >
             <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
    </div>

</div>
<!-- 头部跳转二级路由栏 -->




<!-- 二级路由部分 -->
<div style="background-color:#eee;margin-top:20px;">
    <div class="url_tow">
<router-view></router-view>
</div>
</div>

<!-- 二级路由部分 -->



<!-- 首页底部 -->
<div class="bottom_big">
    <ul class="bottom_dd">
        <li>
            <van-icon name="certificate" color="#fff" size="35"/>
            <samp>七天无理由退换</samp>
        </li>
        <li>
            <van-icon name="certificate" color="#fff" size="35"/>
            <samp>满99元全场免邮</samp>
        </li>
        <li>
            <van-icon name="certificate" color="#fff" size="35"/>
            <samp>100%品质保证</samp>
        </li>
    </ul>
    <div class="bottom_aa">
        <van-icon name="gem" color="#ddd" size="50" style="margin-top:50px"/>
        <div class="bottom_sy" style="margin-top:30px">
            <div>首页</div>|
            <div>全部商品</div>|
            <div>关于我们</div>
        </div>
        <div style="margin-top:15px">
            商城版权所有 © 2012-2021
        </div>
    </div>
</div>
<!-- 首页底部 -->





            


    </div>
</template>

<script>
export default {
    data() {
        return {
            allss:"",
           yyds:"",
           yyds_allcart:"border-bottom:2px solid #0af;color:#0af",
           yyds_my:"border-bottom:2px solid #0af;color:#0af",
           yydsone:"color:#0af",
           yydstow:"",
           yydsmy:"",
           dialogVisible:false,
           username: '',
           password: '',
           zc_add:false,//注册
           name:""
        };
    },

    mounted() {
        this.shoppe_sy();
    },
    created() {
        
    },

    methods: {
        shoppe_sy(){
            this.yyds="border-bottom:2px solid #0af;color:#0af";
            this.yydsone="color:#0af"
            this.yyds_allcart="";
            this.yyds_my="";
            this.yydstow="",
            this.yydsmy=""
        },
        shoppe_cartall(){
            this.yyds="";
            this.yyds_allcart="border-bottom:2px solid #0af;color:#0af";
            this.yydsone=""
            this.yyds_my="";
            this.yydstow="color:#0af",
            this.yydsmy=""
        },
        shoppe_my(){
            this.yyds="";
            this.yyds_allcart="";
            this.yyds_my="border-bottom:2px solid #0af;color:#0af";
            this.yydsone=""
            this.yydstow="",
            this.yydsmy="color:#0af"
        },
        // 登录
        onSubmit(values) {
    //   console.log(values);
      this.$axios.post("api/users/login",values).then((res)=>{
    // console.log(res.data,"888")
    if(res.data.code=="001"){
  this.$message({
          showClose: true,
          message: res.data.msg,
          type: 'success'
        });
        let token="token"
        let obj=res.data.user.user_id
        // console.log(res.data.user.user_id)
        this.$store.commit('dladd',{token:token,obj:obj})
        this.username= ''
          this.password= ''
        this.dialogVisible=false
        this.$store.commit('dlname',values.userName)
    }else{
this.$message({
          showClose: true,
          message: res.data.msg,
          type: 'warning'
        });
        this.username= ''
          this.password= ''
    }
    
      })
  
    },


    //注册
zc_sj(values){
    console.log(values.userName)
    this.$axios.post("api/users/findUserName",{userName:values.userName}).then((res)=>{
        console.log(res)
        if(res.data.code=="001"){
            this.$axios.post("api/users/register",values).then((item)=>{
                if(item.data.msg=="001"){
                    this.username= ''
          this.password= ''
                     this.$message({
          showClose: true,
          message: item.data.msg,
          type: 'success'
        });
        this.zc_add=false
                }else{
                    this.$message({
          showClose: true,
          message: item.data.msg,
          type: 'warning'
        });
                   this.username= ''
          this.password= ''
                }
            })
           this.username= ''
          this.password= ''
        }else{
             this.$message({
          showClose: true,
          message: res.data.msg,
          type: 'warning'
        });
        this.username= ''
          this.password= ''
        }
    })
},
//退出登录
tcdl(){
    this.$confirm('此操作将退出登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '退出成功!'
          });
          this.$store.commit("tcdl")
          this.$router.push("/")
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          });          
        });
}













        
    },
};
</script>

<style scoped>
#top{
    width: 100%;
    height: 40px;
    background-color: #3d3d3d;

}
#top>ul{
    width: 450px;
    height: 40px;
    margin-right: 18%;
    display: flex;
    font-size: 14px;
    color: #b0b0b0;
    float: right;
    
}
#top>ul>li{
    flex: 1;
    text-align: left;
    line-height: 40px;
    text-align: center;
}
.top_dl{
    cursor: pointer;
}
.top_dl>span:hover{
    color: white;
    cursor: pointer;
}
.top_min{
color: #b0b0b0;
}
.top_min:hover{
   color: white;
   cursor: pointer;
}
.top_cart{
    text-align: center !important;
    color: #b0b0b0;
}
.top_cart:hover{
    background-color: white;
    color: tomato;
    cursor: pointer;
}
#bql_big{
    width: 100%;
    height: 60px;
    /* background-color: pink; */
    margin-top: 20px;
    display: flex;
}
.bql_shoppe{
    width: 10%;
    height: 100%;
    margin-left: 20%;
    border-bottom: 1px solid gray;
}
.bql_img{
    cursor: pointer;
}
.bql_ul{
    width: 30%;
    height: 100%;
    display: flex;
    line-height: 60px;
    /* background-color: red; */
    padding-left:5% ;
    border-bottom: 1px solid gray;
}
.bql_ul>li{
    width: 15%;
    text-align: center;
    cursor: pointer;
    color: gray;
}
/* 头部标签栏的蓝色 */
/* .bql_ul>li:nth-child(1){
    color: #0af;
    border-bottom:2px solid #0af;
} */
.bql_ul>li:hover{
    color: black;
    /* border-bottom:2px solid #0af; */
}
.bql_ss{
    width: 18%;
    height: 100%;
    line-height: 60px;
    border-bottom: 1px solid gray;
}
.url_tow{
    margin-left: 20%;
    width: 63%;
    /* height: 500px; */
    margin-top: 15px;
    /* background-color: pink; */
}
.bottom_big{
    width: 100%;
    height: 350px;
    background-color: #2f2f2f;
}
.bottom_dd{
    width: 100%;
    height: 145px;
    border-bottom: 1px solid white;
    display: flex;
    line-height: 145px;
}
.bottom_dd>li{
    color: white;
    font-size: 25px;
    flex: 1;
    text-align: center;
}
.bottom_dd>li:nth-child(1){
    text-align: right;
}
.bottom_dd>li:nth-child(3){
    text-align: left;
}
.bottom_aa{
    width: 100%;
    /* height: 100%; */
    text-align: center;
    color: grey;
}
.bottom_sy{
    display: flex;
    padding-left:42% ;
}
.bottom_sy>div{
    width: 9%;
}
</style>